<template>
  <el-form ref="form" :model="form" label-width="140px" style="margin-left: 200px; margin-top: 100px">
    <el-form-item label="请学生选择贷款年度">
      <el-select
        style="width: 300px"
        @change="toChoose"
        v-model="duringYear" placeholder="请选择年度">
        <el-option
          v-for="item in yearOptions"
          :key="item.duringYear"
          :label="item.duringYear"
          :value="item.duringYear"
        >
        </el-option>
      </el-select>
      <i v-if="isFirstsIconEnable" style="margin-left: 10px" class="el-icon-circle-check"></i>
    </el-form-item>
    <el-form-item label="请学生输入校验码">
      <el-input @blur="onInputBlur" v-model="form.validateCode" :disabled="rebackCodeEnable" style="width: 300px"></el-input>
      <i v-if="isSencondIconEnable" style="margin-left: 10px" class="el-icon-circle-check"></i>
    </el-form-item>
    <el-form-item>
      <el-upload
        style="margin-left: 60px; margin-top: 30px"
        :headers="upload.headers"
        class="upload-demo"
        ref="uploadOfFront"
        :action="upload.url"
        :on-preview="handlePreview"
        :before-upload="beforeUploadOfReceipt"
        :data="uploadDataOfReceipt"
        :on-error = "error"
        :on-success="successOfReceipt"
        :on-remove="handleRemove"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取学生返贷款回执单文件</el-button>
      </el-upload>
      <el-button type="danger" style="margin-left: 60px; width: 180px; margin-top: 100px; float: left" @click="submitUpload">确认上传贷款回执单</el-button>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <img v-if="form.receiptPath" :src="'http://localhost:8080' + form.receiptPath" style="width: 240px; height: 160px; margin-left: 120px; float: left; margin-top: -30px ">
    </el-form-item>
  </el-form>
</template>

<script>

  import { getToken } from '../../../utils/auth'
  import { selectCreditByDuringYearAndUserName, getCredits } from '../../../api/county/credit'
  import { listYearJsonData } from '../../../api/yearJson/yearJson'

  export default {
    data() {
      return {
        isFirstsIconEnable: false,
        isSencondIconEnable: false,
        rebackCode: '',
        rebackCodeEnable: true,
        // 用户上传参数
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/minio/uploadReceipt",
        },
        creditId: '',
        receiptPath: '',
        dialogVisible: false,
        uploadDataOfReceipt: null,
        dialogImageUrl: '',
        duringYear: '',
        form: {
          validateCode: ''
        },
        yearOptions: []
      }
    },
    created() {
      this.getYearJson()
    },
    methods: {
      getYearJson() {
        listYearJsonData().then(res => {
          console.log(res)
          this.yearOptions = res.rows
        })
      },
      onInputBlur() {
        if (this.form.validateCode !== this.rebackCode) {
          this.openVn2()
          this.isSencondIconEnable = false
        } else {
          this.isSencondIconEnable = true
        }
      },
      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '抱歉, ' + this.$store.state.user.name + ' 您在 ' + this.form.duringYear +  ' 年度还没有贷款,请正确选择!'),
            h('i', { style: 'color: teal' })
          ])
        }, 2000);
      },
      openVn2() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '抱歉, ' + this.$store.state.user.name + ' 您输入的返校校验码不正确,请重新输入!'),
            h('i', { style: 'color: teal' })
          ])
        }, 2000);
      },
      toChoose(val) {
        this.form.duringYear = val
        this.getRebackCode()
        selectCreditByDuringYearAndUserName(this.form.duringYear, this.$store.state.user.name).then(res => {
          console.log(res.data)
          if (res.data !== null) {
            console.log('该年度下的验证码: ' + res.data.rebackCode)
            this.rebackCode = res.data.rebackCode
            this.creditId = res.data.creditId
          }
        })
      },
      getRebackCode() {
        getCredits(this.$store.state.user.name).then(res => {
          console.log(res.data)
          let arr = []
          for (let i in res.data) {
            arr.push(res.data[i].duringYear)
          }
          // 判断当前用户的贷款记录中年度是否包含我所选中的年度
          if (arr.includes(this.form.duringYear)) {
            this.rebackCodeEnable = false
            this.isFirstsIconEnable = true
          } else {
            this.openVn()
            this.rebackCodeEnable = true
          }
        })
      },
      beforeUploadOfReceipt (file) {
        this.uploadDataOfReceipt = {file: file, creditId: this.creditId, bucketName: 'receipt'};
        console.log(this.uploadDataOfReceipt)
        let promise = new Promise((resolve) => {
          this.$nextTick(function () {
            resolve(true);
          });
        });
        return promise; //通过返回一个promise对象解决
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //上传
      submitUpload() {
        this.$refs.uploadOfFront.submit();
      },
      successOfReceipt(res, file, fileList){
        console.log(res)
        this.receiptPath = res.receiptPath
        this.msgSuccess('学生上传返校回执单文件成功!')
      },
      //失败钩子
      error(response, file, fileList){
        console.log(response)
      },
    }
  }
</script>
